<template>
<!-- 流程设置 -->
<Card style="height:800px">
  <header>
    <span>名称:</span>
    <Input v-model="params.actName" placeholder="请输入" style="width: 200px"></Input>
    <span style="margin:0px 0px 0px 20px">状态:</span>
    <Select v-model="params.status" style="width:200px">
        <Option v-for="item in statusOptionsData" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
    <Button type="primary" @click="initPage"   style="margin:0px 0px 0px 20px;width: 90px">查询</Button>
    <Button type="primary" @click="addFlowPage" style="margin:0px 0px 0px 20px;width: 90px">新增流程</Button>
  </header>
  <Content style="margin-top:20px;">
    <Table border :columns="tableColumns" :data="tableDatas"></Table>
  </Content>
  <div style="text-align:center;width:50%;margin:100px auto;">
    <Page :total="totalPage" :current="currentPage" :page-size="pageSize" show-elevator show-total @on-change="handlePageChange"></Page>
  </div>
</Card>
</template>

<script>
export default {

  data () {
    return {
      test: 'hello',
      isEdit: false,
      tableColumns: [{
        type: 'index',
        title: '序号'
      },
      {
        title: '名称',
        key: 'name'
      },
      {
        title: '流程ID/KEY',
        key: 'flow_key'
      },
      {
        title: '流程名称',
        key: 'flow_name'
      },
      {
        title: '使用版本',
        key: 'flow_version'
      },
      {
        title: '状态',
        key: 'flow_status'
      },
      {
        title: '最近更新人',
        key: 'update_by'
      },
      {
        title: '最近更新时间',
        key: 'updated_date'
      },
      {
        title: '操作',
        render: (h, param) => {
          const vm = this
          return h('div', {}, [
            h('Button', {
              props: {
                type: 'primary',
                size: 'small'
              },
              style: {
                fontSize: '12px'
              },
              on: {
                click: () => {
                  vm.handleRouterGo('flow_def_version', param.row.act_key)
                }
              }
            }, '查看')
          ])
        }
      }
      ],
      tableDatas: [],
      statusOptionsData: [{
        value: '',
        label: '请选择'
      },
      {
        value: 0,
        label: '有效'
      },
      {
        value: 1,
        label: '无效'
      }
      ],
      params: {},
      totalPage: 0,
      currentPage: 1,
      pageSize: 20
    }
  },
  methods: {
    handleRouterGo (toPage, actKey) {
      if (actKey != null) {
        this.$router.push({
          name: toPage,
          params: {
            actKey: actKey
          }
        })
      } else {
        this.$Message.warning('参数为空')
      }
    },
    handlePageChange (goPage) {
      // this.$router.push({path:'/flow_def',query:{pageNo:goPage}});
      // 设置查询参数
      // this.$router.push({name:'flow_def',query:{pageNo:new Date().getTime()},params:{pageNo:goPage}});//类似post传参
      this.initPage(goPage)
    },
    addFlowPage () {
      this.$router.push({
        name: 'flow_def_add',
        params: {}
      }) // 类似post传参
    },
    initPage (goPage) {
      var vm = this
      if (parseFloat(goPage).toString() === 'NaN') {
        goPage = 1
      }
      vm.params.pageNo = goPage
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/manager/service/query', vm.params).then(re => {
        this.totalPage = re.data.data.total
        this.pageSize = re.data.data.pageSize
        this.currentPage = re.data.pageNum
        this.tableDatas = []
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.name = item.name
          tData.flow_key = item.actKey
          tData.flow_name = item.actName
          tData.flow_version = item.actVersion
          if (item.status === 0) {
            tData.flow_status = '有效'
          } else {
            tData.flow_status = '无效'
          }
          tData.act_key = item.actKey
          tData.update_by = item.updatedBy
          tData.updated_date = vm.$util.formatTime(new Date(item.updatedDate))
          this.tableDatas.push(tData)
        })
      }).catch(er => {})
    }
  },
  created: function () {
    this.$ajax = this.$util.ajax()
    this.initPage(1)
  }
}
</script>

<style lang="less">

</style>
